<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .box{
            width: 800px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .title{
            margin: 5px 0;
            color: #ccc;
        }
        li{
            list-style: none;
            line-height: 60px;
            border-bottom: 1px solid #ccc;
        }
        .color{
            color: #999;
        }
        .fr{
            float: right;
            color: red;
        }
        .fr img{
            vertical-align: middle;
            width: 15px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" >
             <h4>{{arr.title}}</h4>
             <p class="title">
                ·分享:问答 ·{{arr.visit_count}}次访问·发布于{{arr.last_reply_at |ferdate}}·作者:{{arr.author.loginname}}
             </p>
             <div v-html="arr.content">{{arr.content}}</div>
             <ul>
                 <li v-for="(item,index) in arr2">
                     <h5>{{item.author.loginname}} <span class="color">{{index+1}}楼</span> <span class="fr"><img src="./images/cart.jpg" alt="">{{item.ups.length}}</span> </h5>
                        <p v-html="item.content">
                            {{item.content}}
                        </p>
                    </li>
             </ul>
        </div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script>
    let zero =val=>{
           return val <10? "0"+val:val
    }
    let vm =new Vue({
        el:'#app',
        data:{
            arr:[],
            arr2:[],
        },
        mounted(){
            let url ="https://cnodejs.org/api/v1/topic/5ae140407b0e8dc508cca7cc"
            axios.get(url).then(res=>{
                // console.log(res.data.data);
                this.arr=res.data.data
                this.arr2=res.data.data.replies
                // console.log(res.data.data.replies);
                    
            })
        },
        filters:{
            ferdate:val=>{
                let date = new Date(val);
                    let year = date.getFullYear();
                    let month = zero(date.getMonth() + 1);
                    let day = zero(date.getDate());
                    let hours = zero(date.getHours());
                    let minutes = zero(date.getMinutes());
                    let seconds = zero(date.getSeconds());
                    return year + '-' + month + '-' + day + '-' + ' ' + hours + ':' + minutes + ':' + seconds;
            }

        }
    })
</script>
</html>